<template>
  <section class="pb-5">
    <div class="container-lg">

      <div class="row">
        <div class="col-md-12">

          <div class="section-header d-flex flex-wrap justify-content-between my-4">

            <h2 class="section-title">最畅销的产品</h2>

            <div class="d-flex align-items-center">
              <a href="#" class="btn btn-primary rounded-1">View All</a>
            </div>
          </div>

        </div>
      </div>

      <div class="row">
        <div class="col-md-12">

          <div class="product-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5">

            <div class="col" v-for="product in sellingProduct" :key="product.id">
              <div class="product-item">
                <figure>
                  <a href="javascript: void(0)" @click="details(product)" title="Product Title">
                    <img :src="'http://localhost:90'+product.imgLink" alt="Product Thumbnail" class="tab-image">
                  </a>
                </figure>
                <div class="d-flex flex-column text-center">
                  <h3 class="fs-6 fw-normal">{{product.name}}</h3>
                  <div class="d-flex justify-content-center align-items-center gap-2">
                    <span class="text-dark fw-semibold">￥{{product.price}}</span>
                  </div>
                  <div class="button-area p-3 pt-0">
                    <div class="row g-1 mt-2">
                      <div class="col-3">
                        <input type="number" name="quantity" class="form-control border-dark-subtle input-number quantity" v-model="product.num" min="1" :max="product.stock">
                      </div>
                      <div class="col-7">
                        <a href="javascript:void(0)" class="btn btn-primary rounded-1 p-2 fs-7 btn-cart" @click="addToCart(product)">
                          <svg width="18" height="18">
                            <use xlink:href="javascript:void(0)" ></use>
                          </svg>
                          加入购物车
                        </a>
                      </div>
                      <div class="col-2">
                        <a href="#" class="btn btn-outline-dark rounded-1 p-2 fs-6">
                          <svg width="18" height="18"><use xlink:href="#heart"></use>
                          </svg>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <!-- / product-grid -->


        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'SellingProduct',
  components: {},
  props: {},
  data () {
    return {
      user: this.$store.state.user,
      sellingProduct: []
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    initSellingProduct () {
      this.$axios.get("http://localhost:8090/product/getSellingProduct").then(({ data }) => {
        this.sellingProduct = data;
      })
    },
    details(product){
      this.$store.commit('initProduct', product)
      window.location.href = '/Organic/product';
    },
    addToCart(product){
      if(this.user.consumerId !== undefined){
        let formData = new FormData();
        formData.append('productId', product.productId);
        formData.append('num', product.num);
        formData.append('consumerId', this.user.consumerId);
        this.$axios.post('http://localhost:8090/cart/addToCart', formData).then(({ data }) => {
          if (data) {
            this.$notify({
              title: '添加成功',
              message: '添加成功！',
              type: 'success'
            });
            this.intCart()
            this.$forceUpdate(); // 强制重新渲染，触发计算属性更新
          }else{
            this.$notify({
              title: '添加失败',
              message: '添加失败，请稍后重试',
              type: 'warning'
            });
          }
        });
      }else {
        this.$notify({
          title: '请先登录',
          message: '请先登录！',
          type: 'warning'
        });
      }

    },
    intCart(){
      this.$axios.get('http://localhost:8090/cart/getCartByConsumerId?consumerId=' + this.user.consumerId).then(({ data }) => {
        // eslint-disable-next-line no-empty
        if(data !== null && data !== undefined ){
          this.carts = data;
          this.$store.commit('initCarts', this.carts)
        }
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initSellingProduct();
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
